<template>
  <div style="max-width: 1200px; margin: 0 auto; padding: 20px;
      font-family: 'Microsoft Yahei';">

    <el-card
        shadow="hover"
        style="margin-bottom: 15px; padding: 10px 150px;">
      <template #header>
        <h2 style="margin: 0; font-size: 20px; text-align: center;">
          {{ examInfo.examName }}</h2>
      </template>

      <el-descriptions
          :column="1" border align="center" style="font-size: 15px;">
        <el-descriptions-item
            label="考试描述"
            label-style="width: 20%; background: #f5f7fa; font-weight: bold; padding: 12px;"
            content-style="width: 80%; padding: 12px;">
          {{ examInfo.examDesc }}
        </el-descriptions-item>
        <el-descriptions-item
            label="考试总分"
            label-style="width: 20%; background: #f5f7fa; font-weight: bold; padding: 12px;"
            content-style="width: 80%; padding: 12px;">
          {{ examInfo.totalScore }}
        </el-descriptions-item>
        <el-descriptions-item
            label="及格分数"
            label-style="width: 20%; background: #f5f7fa; font-weight: bold; padding: 12px;"
            content-style="width: 80%; padding: 12px;">
          {{ examInfo.passScore }}
        </el-descriptions-item>
        <el-descriptions-item
            label="考试时长"
            label-style="width: 20%; background: #f5f7fa; font-weight: bold; padding: 12px;"
            content-style="width: 80%; padding: 12px;">
          {{ examInfo.duration }}分钟
        </el-descriptions-item>
        <el-descriptions-item
            label="开始时间"
            label-style="width: 20%; background: #f5f7fa; font-weight: bold; padding: 12px;"
            content-style="width: 80%; padding: 12px;">
          {{ examInfo.startTime }}
        </el-descriptions-item>
        <el-descriptions-item
            label="结束时间"
            label-style="width: 20%; background: #f5f7fa; font-weight: bold; padding: 12px;"
            content-style="width: 80%; padding: 12px;">
          {{ examInfo.endTime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-alert
        title="温馨提示" type="warning" show-icon
        style="margin-bottom: 30px; font-size: 14px;">
      <div style="color: #606266; margin-top: 8px;">
        <ul style="margin: 0; padding-left: 20px; line-height: 1.8;">
          <li>考试期间请勿中途退出、刷新页面或关闭浏览器，否则将清空本次作答记录，需重新参加考试。</li>
          <li>请提前检查网络稳定性，确保考试过程中网络通畅，避免因断网导致作答数据丢失。</li>
          <li>作答过程中系统会自动保存答案，但建议关键步骤手动确认保存，以防异常情况。</li>
        </ul>
      </div>
    </el-alert>

    <el-row justify="center" style="margin-bottom: 20px;">
      <el-col :span="4" style="margin-right: 20px;">
        <router-link to="/examL">
        <el-button style="width: 100%; font-size: 15px;">返回</el-button>
        </router-link>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" style="width: 100%; font-size: 15px;" @click="startDialog">开始考试</el-button>
      </el-col>
    </el-row>
  </div>

  <el-dialog
      v-model="isDialog"
      title="温馨提示" width="30%" :center="true" :show-close="false">
    <div style="text-align: center; font-size: 15px;">确认进入考试吗？中途不可退出</div>
    <template #footer>
      <div style="display: flex; justify-content: center; gap: 20px;">
        <el-button @click="isDialog = false">取消</el-button>
        <el-button type="primary" @click="examAnswer">确认进入</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
const route = useRoute();
const router = useRouter();
const examId = route.query.examId;
const examInfo = ref({}); // 存储考试信息
const fetchExamInfo = ()=>{
  axios.get(BASE_URL+'/v1/exam/select?examId='+examId).then((ref)=>{
    if (ref.data.code == 200){
      console.log(ref.data.data);
      examInfo.value = ref.data.data[0];
      console.log(examInfo.value);
    }else {
      ElMessage.error(ref.data.message)
    }
  })
}
onMounted(()=>{
  fetchExamInfo();
})
const isDialog = ref(false);
const startDialog = ()=>{
  isDialog.value = true;
}
const examAnswer =() => {
  router.push({
    path: '/examA',
    query: { examId: examId }
  });
}
</script>
